import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
} from '@angular/core';
export interface Channel {
  src: string;
  title: string;
}
@Component({
  selector: 'app-grit-item',
  templateUrl: './grit-item.component.html',
  styleUrls: ['./grit-item.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GritItemComponent implements OnInit {
  @Input() channelData: Channel[] = [];
  @Input() cols = 8;
  // 屏幕显示个数
  @Input() displayCols = 5;
  sliderMargin = '0';
  constructor() {}

  ngOnInit() {}
  // 显示滚动条
  public get scrollable(): boolean {
    return this.cols > this.displayCols;
  }

  public get templateRows(): string {
    return `minmax(auto, max-content)`;
  }
  // 计算显示的列数
  public get templateColumns(): string {
    return `repeat(${this.cols}, calc((100vw - ${
      this.displayCols * 0.4
    }rem) / ${this.displayCols}))`;
  }

  public handleScroll(ev: any) {
    this.sliderMargin = `0 ${
      (130 * ev.target.scrollLeft) / ev.target.scrollWidth
    }%`;
  }
}
